<template>
	<div class="login">
		<!-- 左侧扫码登录 -->
		<div class="left">
			<div class="title">
				<span>可使用</span>
				<span style="color:#114CEE;">欧神app</span>
				<span>扫码登录</span>
			</div>
			<div class="img">
				<img src="/vue.svg" alt="">
				<div>
					<img src="/header/code2d.svg" alt="">
				</div>
			</div>
		</div>
		<!-- 右侧账户登录 -->
		<div class="right">
			<div class="card">
				<div class="title">
					交易登录
				</div>
				<div class="tabs">
					<div class="active">
						手机号
					</div>
					<div>
						邮箱
					</div>
					<!-- 蓝色背景 -->
					<div class="blue_"></div>
				</div>
				<template v-if="isTell">
					<div class="row_">
						<p>手机号</p>
						<div class="row_flex">
							<el-dropdown>
								<el-button type="primary" color="#fff" class="btn-tell">
									+86
									<el-icon class="el-icon--right">
										<arrow-down />
									</el-icon>
								</el-button>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item>Action 1</el-dropdown-item>
										<el-dropdown-item>Action 2</el-dropdown-item>
										<el-dropdown-item>Action 3</el-dropdown-item>
										<el-dropdown-item>Action 4</el-dropdown-item>
										<el-dropdown-item>Action 5</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
							<el-input   placeholder="请输入手机号" 
							class="input_"/>
						</div>
					</div>
					<div class="row_">
						<p>密码</p>
						<el-input class="h-58px " style="font-size: 18px;" 
						show-password
						placeholder="请输入密码" />
					</div>
				</template>
				<template v-else>
				</template>
				<div class="made">
					<p>
						<span>没有账号？</span>
						<span class="blue-font">注册</span>
					</p>
					<p>
						<span class="blue-font"
						@click="jumpTo('/reset')">忘记密码？</span>
					</p>
				</div>

				<div>
					<el-button class="btn" type="primary" color="#114CEE">登录</el-button>
				</div>
				<div class="bottom">
					<span>登录即表示同意</span>
					<a href="">《用户协议》</a>
					<span>和</span>
					<a href="">《隐私条款》</a>
				</div>

			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import useJump from '@/utils/jump';

const { jumpTo } = useJump();

const isTell = ref<boolean>(true)

</script>
<style scoped lang="scss">
.login {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 5vh 0;

	>div {
		width: 30%;
	}

	.left {
		.title {
			margin-bottom: 20px;
			font-family: "Microsoft YaHei", "Microsoft YaHei";
			font-size: 28px;
			font-weight: 400;
			color: #000;
			text-align: center;
			letter-spacing: 10px;
		}

		.img {
			display: flex;
			align-items: center;
			justify-content: center;

			>img {
				width: 30%;
			}

			>div{
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				// width:10rem;
				// height: 10rem;
				padding: 10px;
				margin-left:3rem;
				border-radius: 10px;
				// border: 1px solid #999;
				box-shadow: 4px 4px 4px 4px rgb(152 149 149 / 25%);

				>img{
					width:11rem;
					height: 11rem;
				}
			}
		}
	}

	.right {
		.card {
			box-sizing: border-box;
			width: 25vw;
			padding: 30px;
			background: #FFF;
			border: 1px solid #E5E6EB;
			border-radius: 16px;

			>div {
				margin: 20px 0;
			}

			.title {
				margin: 30px 0;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 34px;
				font-weight: bold;
				color: #000;
			}

			.tabs {
				position: relative;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 176px;
				height: 38px;
				padding: 0 10px;
				background: #FFF;
				border: 1px solid #E5E6EB;
				border-radius: 8px;

				>div {
					z-index: 100;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #000;
				}

				.active {
					color: #fff;
				}

				.blue_ {
					position: absolute;
					top: 5%;
					left: 4px;
					z-index: 50;
					width: 56%;
					height: 90%;
					background-color: #114CEE;
					border-radius: 8px;
					
				}
			}

			.row_ {
				>p {
					margin-bottom: 10px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #86909C;
				}

				.btn-tell {
					flex: 3;
					height: 58px;
					border: 1px solid #E5E6EB;
					border-radius: 8px;
				}

				.input_{
					flex:10;
					height: 58px;
					margin-left: 10px;
					font-size: 18px;
				}

				.row_flex{
					display: flex;
				}
			}

			.made {
				display: flex;
				justify-content: space-between;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				.blue-font {
					cursor: pointer;
					color: #114CEE;
				}
			}

			.btn {
				width: 100%;
				height: 50px;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: 400;
				color: #FFF;
			}

			.bottom {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				>a {
					color: #000;
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: inherit;
						text-decoration: none;
					}
				}
			}
		}
	}
}
</style>
